<template>
  <div class="conflict-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="handleBack" :icon="ArrowLeft" class="back-btn">
          返回
        </el-button>
        <h1 class="page-title">冲突检测详情</h1>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleExport" :icon="Download" :loading="exporting">
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 检测基本信息 -->
    <div class="info-card">
      <div class="card-header">
        <h3 class="card-title">检测基本信息</h3>
      </div>
      <div class="card-content">
        <div class="info-grid">
          <div class="info-item">
            <label>检测ID：</label>
            <span>{{ detectionInfo.id }}</span>
          </div>
          <div class="info-item">
            <label>创建时间：</label>
            <span>{{ detectionInfo.createTime }}</span>
          </div>
          <div class="info-item">
            <label>检测状态：</label>
            <el-tag :type="getStatusTagType(detectionInfo.status)" size="small">
              {{ getStatusLabel(detectionInfo.status) }}
            </el-tag>
          </div>
          <div class="info-item">
            <label>创建人：</label>
            <span>{{ detectionInfo.creator }}</span>
          </div>
          <div class="info-item">
            <label>检索关键词：</label>
            <span>{{ detectionInfo.keywords }}</span>
          </div>
          <div class="info-item">
            <label>检索范围：</label>
            <span>{{ detectionInfo.scope }}</span>
          </div>
          <div class="info-item">
            <label>冲突数量：</label>
            <span class="conflict-count">{{ detectionInfo.conflictCount }}</span>
          </div>
          <div class="info-item">
            <label>完成时间：</label>
            <span>{{ detectionInfo.completeTime || '-' }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 冲突详情列表 -->
    <div class="conflicts-card" v-if="conflictDetails.length > 0">
      <div class="card-header">
        <h3 class="card-title">冲突详情</h3>
        <span class="conflict-summary">共发现 {{ conflictDetails.length }} 个冲突</span>
      </div>
      <div class="card-content">
        <div class="conflict-list">
          <div 
            v-for="(conflict, index) in conflictDetails" 
            :key="conflict.id"
            class="conflict-item"
          >
            <div class="conflict-header">
              <div class="conflict-title">
                <span class="conflict-number">冲突 {{ index + 1 }}</span>
                <el-tag :type="getConflictLevelType(conflict.level)" size="small">
                  {{ getConflictLevelLabel(conflict.level) }}
                </el-tag>
              </div>
              <div class="conflict-actions">
                <el-button 
                  type="text" 
                  size="small" 
                  @click="toggleConflictDetail(index)"
                  :icon="conflict.expanded ? ArrowUp : ArrowDown"
                >
                  {{ conflict.expanded ? '收起' : '展开' }}
                </el-button>
              </div>
            </div>
            
            <div class="conflict-summary-info">
              <div class="conflict-documents">
                <span class="label">涉及文档：</span>
                <span class="documents">{{ conflict.documents.join('、') }}</span>
              </div>
              <div class="conflict-description">
                <span class="label">冲突描述：</span>
                <span class="description">{{ conflict.description }}</span>
              </div>
            </div>

            <!-- 可展开的详细内容 -->
            <div v-show="conflict.expanded" class="conflict-detail-content">
              <div class="detail-tabs">
                <el-tabs v-model="conflict.activeTab" type="card">
                  <el-tab-pane label="冲突分析" name="analysis">
                    <div class="tab-content">
                      <div class="html-content" v-html="conflict.analysisContent"></div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="解决方案" name="solution">
                    <div class="tab-content">
                      <div class="html-content" v-html="conflict.solutionContent"></div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="相关文档" name="documents">
                    <div class="tab-content">
                      <div class="document-list">
                        <div 
                          v-for="doc in conflict.relatedDocuments" 
                          :key="doc.id"
                          class="document-item"
                        >
                          <div class="doc-info">
                            <div class="doc-name">{{ doc.name }}</div>
                            <div class="doc-meta">
                              <span class="doc-category">{{ doc.category }}</span>
                              <span class="doc-type">{{ doc.type }}</span>
                              <span class="doc-uploader">{{ doc.uploader }}</span>
                            </div>
                          </div>
                          <div class="doc-actions">
                            <el-button type="text" size="small" @click="viewDocument(doc)">
                              查看
                            </el-button>
                            <el-button type="text" size="small" @click="downloadDocument(doc)">
                              下载
                            </el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <el-empty description="暂无冲突详情" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Download, ArrowUp, ArrowDown } from '@element-plus/icons-vue'

// 路由相关
const route = useRoute()
const router = useRouter()

// 检测基本信息
interface DetectionInfo {
  id: number
  createTime: string
  completeTime?: string
  keywords: string
  scope: string
  status: 'in_progress' | 'completed' | 'stopped'
  conflictCount: number
  creator: string
}

// 冲突详情
interface ConflictDetail {
  id: number
  level: 'high' | 'medium' | 'low'
  documents: string[]
  description: string
  analysisContent: string
  solutionContent: string
  relatedDocuments: DocumentInfo[]
  expanded: boolean
  activeTab: string
}

// 文档信息
interface DocumentInfo {
  id: number
  name: string
  category: string
  type: string
  uploader: string
  createTime: string
}

// 响应式数据
const detectionInfo = ref<DetectionInfo>({
  id: 1,
  createTime: '2025-07-15 12:02:21',
  completeTime: '2025-07-15 12:15:30',
  keywords: '会议纪要',
  scope: '分类1,分类2...',
  status: 'completed',
  conflictCount: 3,
  creator: '张三'
})

const conflictDetails = ref<ConflictDetail[]>([])
const exporting = ref(false)

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case 'in_progress':
      return 'warning'
    case 'completed':
      return 'success'
    case 'stopped':
      return 'info'
    default:
      return 'info'
  }
}

// 获取状态标签文本
const getStatusLabel = (status: string) => {
  switch (status) {
    case 'in_progress':
      return '进行中'
    case 'completed':
      return '已完成'
    case 'stopped':
      return '已停止'
    default:
      return '未知'
  }
}

// 获取冲突等级标签类型
const getConflictLevelType = (level: string) => {
  switch (level) {
    case 'high':
      return 'danger'
    case 'medium':
      return 'warning'
    case 'low':
      return 'info'
    default:
      return 'info'
  }
}

// 获取冲突等级标签文本
const getConflictLevelLabel = (level: string) => {
  switch (level) {
    case 'high':
      return '高'
    case 'medium':
      return '中'
    case 'low':
      return '低'
    default:
      return '未知'
  }
}

// 切换冲突详情展开状态
const toggleConflictDetail = (index: number) => {
  conflictDetails.value[index].expanded = !conflictDetails.value[index].expanded
}

// 查看文档
const viewDocument = (doc: DocumentInfo) => {
  ElMessage.info(`查看文档：${doc.name}`)
}

// 下载文档
const downloadDocument = (doc: DocumentInfo) => {
  ElMessage.info(`下载文档：${doc.name}`)
}

// 返回上一页
const handleBack = () => {
  router.back()
}

// 导出报告
const handleExport = async () => {
  try {
    exporting.value = true
    // 模拟导出过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success('报告导出成功')
  } catch (error) {
    ElMessage.error('报告导出失败')
  } finally {
    exporting.value = false
  }
}

// 加载检测详情数据
const loadDetectionDetail = async () => {
  try {
    const detectionId = route.params.id
    console.log('加载检测详情，ID:', detectionId)
    
    // 模拟API调用
    // const result = await getDetectionDetail(detectionId)
    // detectionInfo.value = result.info
    // conflictDetails.value = result.conflicts
    
    // 使用Mock数据
    conflictDetails.value = [
      {
        id: 1,
        level: 'high',
        documents: ['安全管理制度汇编.pdf', '员工培训手册.doc'],
        description: '两个文档在安全培训要求方面存在冲突，培训时长和考核标准不一致。',
        analysisContent: `
          <div class="conflict-analysis">
            <h4>冲突分析</h4>
            <p><strong>冲突类型：</strong>培训标准冲突</p>
            <p><strong>影响范围：</strong>全体员工安全培训</p>
            <p><strong>冲突详情：</strong></p>
            <ul>
              <li><strong>安全管理制度汇编.pdf：</strong>要求新员工入职后3个月内完成安全培训，培训时长不少于8小时</li>
              <li><strong>员工培训手册.doc：</strong>要求新员工入职后1个月内完成安全培训，培训时长不少于6小时</li>
            </ul>
            <p><strong>风险评估：</strong>此冲突可能导致培训标准不统一，影响培训效果和合规性。</p>
          </div>
        `,
        solutionContent: `
          <div class="conflict-solution">
            <h4>解决方案</h4>
            <p><strong>建议方案：</strong></p>
            <ol>
              <li><strong>统一培训标准：</strong>建议采用更严格的标准，即3个月内完成8小时培训</li>
              <li><strong>更新文档：</strong>修改员工培训手册中的培训要求</li>
              <li><strong>建立协调机制：</strong>建立文档更新审核流程，避免类似冲突</li>
            </ol>
            <p><strong>实施步骤：</strong></p>
            <ul>
              <li>第一步：召开相关部门协调会议</li>
              <li>第二步：更新员工培训手册</li>
              <li>第三步：通知相关部门执行新标准</li>
              <li>第四步：定期检查执行情况</li>
            </ul>
          </div>
        `,
        relatedDocuments: [
          {
            id: 1,
            name: '安全管理制度汇编.pdf',
            category: '安全类',
            type: 'PDF',
            uploader: '张三',
            createTime: '2024-12-09 13:58:50'
          },
          {
            id: 2,
            name: '员工培训手册.doc',
            category: '人力资源与干部管理',
            type: 'DOC',
            uploader: '李四',
            createTime: '2024-12-08 14:30:20'
          }
        ],
        expanded: false,
        activeTab: 'analysis'
      },
      {
        id: 2,
        level: 'medium',
        documents: ['施工技术规范.pdf', '建筑工程施工质量验收统一标准.pdf'],
        description: '两个规范在混凝土强度检测方法上存在差异。',
        analysisContent: `
          <div class="conflict-analysis">
            <h4>冲突分析</h4>
            <p><strong>冲突类型：</strong>技术标准冲突</p>
            <p><strong>影响范围：</strong>建筑工程质量检测</p>
            <p><strong>冲突详情：</strong></p>
            <ul>
              <li><strong>施工技术规范.pdf：</strong>采用回弹法检测混凝土强度</li>
              <li><strong>建筑工程施工质量验收统一标准.pdf：</strong>要求采用钻芯法检测混凝土强度</li>
            </ul>
            <p><strong>风险评估：</strong>检测方法不同可能导致检测结果差异，影响工程质量评估。</p>
          </div>
        `,
        solutionContent: `
          <div class="conflict-solution">
            <h4>解决方案</h4>
            <p><strong>建议方案：</strong></p>
            <ol>
              <li><strong>采用双重检测：</strong>同时使用两种方法进行检测</li>
              <li><strong>建立检测标准：</strong>明确不同情况下的检测方法选择</li>
              <li><strong>技术培训：</strong>对检测人员进行技术培训</li>
            </ol>
          </div>
        `,
        relatedDocuments: [
          {
            id: 3,
            name: '施工技术规范.pdf',
            category: '施工规范',
            type: 'PDF',
            uploader: '王五',
            createTime: '2024-12-07 09:15:30'
          },
          {
            id: 4,
            name: '建筑工程施工质量验收统一标准.pdf',
            category: '国家规范',
            type: 'PDF',
            uploader: '赵六',
            createTime: '2024-12-06 16:20:10'
          }
        ],
        expanded: false,
        activeTab: 'analysis'
      },
      {
        id: 3,
        level: 'low',
        documents: ['技术交底记录模板.doc'],
        description: '技术交底记录模板中的部分字段定义不够明确。',
        analysisContent: `
          <div class="conflict-analysis">
            <h4>冲突分析</h4>
            <p><strong>冲突类型：</strong>模板规范冲突</p>
            <p><strong>影响范围：</strong>技术交底记录填写</p>
            <p><strong>冲突详情：</strong></p>
            <ul>
              <li>模板中的"交底内容"字段缺少具体填写要求</li>
              <li>"验收标准"字段定义模糊</li>
            </ul>
            <p><strong>风险评估：</strong>可能导致记录填写不规范，影响技术交底效果。</p>
          </div>
        `,
        solutionContent: `
          <div class="conflict-solution">
            <h4>解决方案</h4>
            <p><strong>建议方案：</strong></p>
            <ol>
              <li><strong>完善模板：</strong>补充字段填写说明</li>
              <li><strong>制定填写规范：</strong>明确各字段的填写要求</li>
              <li><strong>培训指导：</strong>对相关人员进行培训</li>
            </ol>
          </div>
        `,
        relatedDocuments: [
          {
            id: 5,
            name: '技术交底记录模板.doc',
            category: '技术文档',
            type: 'DOC',
            uploader: '钱七',
            createTime: '2024-12-05 11:45:30'
          }
        ],
        expanded: false,
        activeTab: 'analysis'
      }
    ]
  } catch (error) {
    console.error('加载检测详情失败:', error)
    ElMessage.error('加载检测详情失败')
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadDetectionDetail()
})
</script>

<style scoped>
.conflict-detail {
  padding: 24px;
  background: #f8fafc;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn {
  color: #6b7280;
  border-color: #e5e7eb;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

/* 卡片样式 */
.info-card,
.conflicts-card {
  background: white;
  border-radius: 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  overflow: hidden;
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.conflict-summary {
  font-size: 14px;
  color: #6b7280;
}

.card-content {
  padding: 24px;
}

/* 基本信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item label {
  font-weight: 600;
  color: #374151;
  min-width: 100px;
}

.info-item span {
  color: #6b7280;
}

.conflict-count {
  color: #dc2626 !important;
  font-weight: 600;
}

/* 冲突列表 */
.conflict-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.conflict-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
}

.conflict-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.conflict-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conflict-number {
  font-weight: 600;
  color: #111827;
  font-size: 16px;
}

.conflict-summary-info {
  padding: 16px 20px;
  background: white;
}

.conflict-documents,
.conflict-description {
  margin-bottom: 12px;
}

.conflict-documents .label,
.conflict-description .label {
  font-weight: 600;
  color: #374151;
  margin-right: 8px;
}

.documents {
  color: #6b7280;
}

.description {
  color: #6b7280;
  line-height: 1.6;
}

/* 详细内容 */
.conflict-detail-content {
  background: white;
  border-top: 1px solid #e5e7eb;
}

.detail-tabs {
  padding: 20px;
}

.tab-content {
  padding: 20px 0;
}

/* HTML内容样式 */
.html-content {
  line-height: 1.6;
  color: #374151;
}

.html-content h4 {
  margin: 0 0 16px 0;
  color: #111827;
  font-size: 16px;
  font-weight: 600;
}

.html-content p {
  margin: 0 0 12px 0;
}

.html-content ul,
.html-content ol {
  margin: 0 0 12px 0;
  padding-left: 20px;
}

.html-content li {
  margin-bottom: 8px;
}

.html-content strong {
  color: #111827;
  font-weight: 600;
}

/* 文档列表 */
.document-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

.doc-info {
  flex: 1;
}

.doc-name {
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.doc-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #6b7280;
}

.doc-category,
.doc-type,
.doc-uploader {
  display: flex;
  align-items: center;
  gap: 4px;
}

.doc-actions {
  display: flex;
  gap: 8px;
}

/* 空状态 */
.empty-state {
  background: white;
  border-radius: 16px;
  padding: 60px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .conflict-detail {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .conflict-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .document-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
